<!--<p class="fenge" style="color: red">懒加载</p>
    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table> -->
 <template>
  <div>
    <el-form ref="form" :model="formData" label-position="top">
      <div>
        <div class="module-table-name mb15">
          <span>基础条件选择</span>
        </div>
        <div class="flex_row" style="display: flex; flex-direction: row">
          <div
            v-for="(item, index) in formData.libraryIdList"
            :key="index"
            class="fx_5"
          >
            <el-form-item style="display: flex; flex-direction: row">
              <el-select
                v-model="item.id"
                placeholder="请选择库位"
                filterable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="libraryItem in libraryOptions"
                  :key="libraryItem.value"
                  :label="libraryItem.label"
                  :value="libraryItem.value"
                >
                </el-option>
              </el-select>
              <span
                v-if="formData.libraryIdList.length > 1"
                @click="delRow(item, index)"
              >
                <span class="el-icon-remove"></span>
              </span>
            </el-form-item>
          </div>
        </div>
        <div class="addBtn" @click="addLibraryIdList">
          <div class="el-icon-plus">新增条件</div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [
        { value: "1", label: "库位1" },
        { value: "2", label: "库位2" },
        { value: "3", label: "库位3" },
        { value: "4", label: "库位4" },
        { value: "5", label: "库位5" },
        { value: "6", label: "库位6" },
      ], // 库存名称列表
    };
  },
  mounted() {},
  methods: {
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].id) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({ id: "" });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
      } else {
        this.$message.warning("至少选择一项");
      }
    },
  },
};
</script>